<%@ page import="com.blog.bean.User" %>
<%@ page import="com.blog.bean.Blog" %>
<%@ page import="java.util.List" %>
<%@ page contentType="text/html; UTF-8" language="java" pageEncoding="UTF-8" %>
<!DOCTYPE HTML>
<html>

<head>
    <meta charset="UTF-8"/>
    <title>我的个人微博</title>
    <link rel="stylesheet" href="css/blog.css"/>
</head>

<%
    User user = (User) session.getAttribute("user");
    List<Blog> latestBlogs = (List<Blog>) request.getAttribute("latestBlogs");
    List<Blog> hotBlogs = (List<Blog>) request.getAttribute("hotBlogs");
    List<Blog> myBlogs = (List<Blog>) request.getAttribute("myBlogs");
%>

<body class="blog_all">
<div class="blog_header">
    <div class="blog_header_title">
        <img class="blog_header_img" src="img/title.png" alt="title">
    </div>
</div>

<div class="blog_content">
    <div class="blog_list">
        <div class="blog_card" style="position: relative;">
            <a key='blog_list_1' href="javascript:void(0)" class="blog_list_label blog_list_label_active">最新</a>
            <a key='blog_list_2' href="javascript:void(0)" class="blog_list_label">热门</a>
            <a key='blog_list_3' href="javascript:void(0)" class="blog_list_label">我的</a>

            <button id="button_publish" class="button_primary publish_button">发布微博</button>
        </div>

        <div>
            <div id="blog_list_1">
                <div id="blog_list_1_wrapper">
                    <%
                        int lastId = 0;
                        for (Blog blog : latestBlogs) {
                            User blogUser = blog.getUser();
                            lastId = blog.getId();
                    %>
                    <div class="blog_card blog_item_card">
                        <div class="blog_card_header">
                            <img class="blog_card_header_img" src="img/user.jpg" alt="user">
                            <div class="blog_card_header_info">
                                <div class="blog_card_header_name"><%=blogUser.getNick()%>
                                </div>
                                <div class="blog_card_header_time"><%=blog.getCreateTime()%>
                                </div>
                            </div>
                        </div>
                        <div class="blog_card_content"><%=blog.getContent()%>
                        </div>
                        <div class="blog_card_action">
                            <a href="javascript:void(0);"
                               class="blog_thumbs blog_card_action_item <%=blog.isThumbs()?"blog_card_action_item_active":""%>"
                               data="<%=blog.getId()%>">
                                <span class="blog_card_action_item_star"></span>
                                <%=blog.getThumbsUp()%>
                            </a>
                            <a href=" javascript:void(0)" class="blog_card_action_item blog_card_comment_click"
                               id="comment_number_1_<%=blog.getId()%>"
                               data-blog="<%=blog.getId()%>"
                               data-list="comment_1_<%=blog.getId()%>_wrapper"
                               key="comment_1_<%=blog.getId()%>">
                                <span class="blog_card_action_item_comment"></span>
                                <%=blog.getComment()%>
                            </a>
                        </div>
                        <div class="blog_card_comment" style="display: none;" id="comment_1_<%=blog.getId()%>">
                            <div class="blog_card_comment_action">
                                <input id="cinput_1_<%=blog.getId()%>" class="blog_card_comment_input" type="text"
                                       placeholder="输入您的评论..."/>
                                <button data-input="cinput_1_<%=blog.getId()%>"
                                        data-blog="<%=blog.getId()%>"
                                        data-list="comment_1_<%=blog.getId()%>_wrapper"
                                        data-number="comment_number_1_<%=blog.getId()%>"
                                        class="blog_card_comment_button publish_comment" type="button">评论
                                </button>
                            </div>
                            <div id="comment_1_<%=blog.getId()%>_wrapper"></div>
                        </div>
                    </div>
                    <%
                        }
                    %>
                </div>

                <div style="text-align: center;padding-bottom: 30px;">
                    <button class="button_primary load_more" style="width: 180px;"
                            data-list="blog_list_1_wrapper" data-id="<%=lastId%>" data-type="1">
                        加载更多
                    </button>
                </div>
            </div>
            <div id="blog_list_2" style="display: none;">
                <div id="blog_list_2_wrapper">
                    <%
                        lastId = 0;
                        for (Blog blog : hotBlogs) {
                            User blogUser = blog.getUser();
                            lastId = blog.getId();
                    %>
                    <div class="blog_card blog_item_card">
                        <div class="blog_card_header">
                            <img class="blog_card_header_img" src="img/user.jpg" alt="user">
                            <div class="blog_card_header_info">
                                <div class="blog_card_header_name"><%=blogUser.getNick()%>
                                </div>
                                <div class="blog_card_header_time"><%=blog.getCreateTime()%>
                                </div>
                            </div>
                        </div>
                        <div class="blog_card_content"><%=blog.getContent()%>
                        </div>
                        <div class="blog_card_action">
                            <a href="javascript:void(0);"
                               class="blog_thumbs blog_card_action_item <%=blog.isThumbs()?"blog_card_action_item_active":""%>"
                               data="<%=blog.getId()%>">
                                <span class="blog_card_action_item_star"></span>
                                <%=blog.getThumbsUp()%>
                            </a>
                            <a href="javascript:void(0)" class="blog_card_action_item blog_card_comment_click"
                               id="comment_number_2_<%=blog.getId()%>"
                               data-blog="<%=blog.getId()%>"
                               data-list="comment_2_<%=blog.getId()%>_wrapper"
                               key="comment_2_<%=blog.getId()%>">
                                <span class="blog_card_action_item_comment"></span>
                                <%=blog.getComment()%>
                            </a>
                        </div>
                        <div class="blog_card_comment" style="display: none;" id="comment_2_<%=blog.getId()%>">
                            <div class="blog_card_comment_action">
                                <input id="cinput_2_<%=blog.getId()%>" class="blog_card_comment_input" type="text"
                                       placeholder="输入您的评论..."/>
                                <button data-input="cinput_2_<%=blog.getId()%>"
                                        data-blog="<%=blog.getId()%>"
                                        data-list="comment_2_<%=blog.getId()%>_wrapper"
                                        data-number="comment_number_2_<%=blog.getId()%>"
                                        class="blog_card_comment_button publish_comment" type="button">评论
                                </button>
                            </div>
                            <div id="comment_2_<%=blog.getId()%>_wrapper"></div>
                        </div>
                    </div>
                    <%
                        }
                    %>
                </div>

                <div style="text-align: center;padding-bottom: 30px;">
                    <button class="button_primary load_more" style="width: 180px;"
                            data-list="blog_list_2_wrapper" data-id="<%=lastId%>" data-type="2">
                        加载更多
                    </button>
                </div>
            </div>
            <div id="blog_list_3" style="display: none;">
                <div id="blog_list_3_wrapper">
                    <%
                        lastId = 0;
                        for (Blog blog : myBlogs) {
                            User blogUser = blog.getUser();
                            lastId = blog.getId();
                    %>
                    <div class="blog_card blog_item_card">
                        <div class="blog_card_header">
                            <img class="blog_card_header_img" src="img/user.jpg" alt="user">
                            <div class="blog_card_header_info">
                                <div class="blog_card_header_name"><%=blogUser.getNick()%>
                                </div>
                                <div class="blog_card_header_time"><%=blog.getCreateTime()%>
                                </div>
                            </div>
                        </div>
                        <div class="blog_card_content"><%=blog.getContent()%>
                        </div>
                        <div class="blog_card_action">
                            <a href="javascript:void(0);"
                               class="blog_thumbs blog_card_action_item <%=blog.isThumbs()?"blog_card_action_item_active":""%>"
                               data="<%=blog.getId()%>">
                                <span class="blog_card_action_item_star"></span>
                                <%=blog.getThumbsUp()%>
                            </a>
                            <a href="javascript:void(0)" class="blog_card_action_item blog_card_comment_click"
                               id="comment_number_3_<%=blog.getId()%>"
                               data-list="comment_3_<%=blog.getId()%>_wrapper"
                               data-blog="<%=blog.getId()%>"
                               key="comment_3_<%=blog.getId()%>">
                                <span class="blog_card_action_item_comment"></span>
                                <%=blog.getComment()%>
                            </a>
                        </div>
                        <div class="blog_card_comment" style="display: none;" id="comment_3_<%=blog.getId()%>">
                            <div class="blog_card_comment_action">
                                <input id="cinput_3_<%=blog.getId()%>" class="blog_card_comment_input" type="text"
                                       placeholder="输入您的评论..."/>
                                <button data-input="cinput_3_<%=blog.getId()%>"
                                        data-blog="<%=blog.getId()%>"
                                        data-list="comment_3_<%=blog.getId()%>_wrapper"
                                        data-number="comment_number_3_<%=blog.getId()%>"
                                        class="blog_card_comment_button publish_comment" type="button">评论
                                </button>
                            </div>
                            <div id="comment_3_<%=blog.getId()%>_wrapper"></div>
                        </div>
                    </div>
                    <%
                        }
                    %>
                </div>

                <div style="text-align: center;padding-bottom: 30px;">
                    <button class="button_primary load_more" style="width: 180px;"
                            data-list="blog_list_3_wrapper" data-id="<%=lastId%>" data-type="3">
                        加载更多
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="blog_user">
        <div class="blog_user_top_color"></div>
        <img class="user_img" src="img/user.jpg" alt="user">
        <p class="user_name"><%=user.getNick()%>
        </p>
        <%
            String sign = user.getSign();
            if (sign == null || sign.length() < 1) {
                sign = "暂无";
            }
        %>
        <p class="user_sign"><%=sign%>
        </p>
        <div class="user_action">
            <button id="button_edit" class="button_primary" style="margin-right: 16px;">编辑资料</button>
            <button id="logout" class="button_danger">退出登录</button>
        </div>
    </div>
</div>

<div id="edit_modal" class="modal" style="display: none;">
    <div class="modal_card">
        <h2 class="modal_title">编辑资料</h2>
        <input id="user_name_input" class="modal_input" type="text" placeholder="输入昵称">
        <textarea id="user_sign_input" style="margin-top: 16px;" class="modal_input" rows="6"
                  placeholder="输入个性签名"></textarea>
        <div class="modal_bottom">
            <button id="edit_cancel" class="button_default" style="margin-right: 16px;">取消</button>
            <button id="edit_submit" class="button_primary">提交</button>
        </div>
    </div>
</div>

<div id="publish_modal" class="modal" style="display: none;">
    <div class="modal_card">
        <h2 class="modal_title">发布微博</h2>
        <textarea id="blog_input" class="modal_input" rows="6" placeholder="输入微博内容,不超过500个字"></textarea>
        <div class="modal_bottom">
            <button id="publish_cancel" class="button_default" style="margin-right: 16px;">取消</button>
            <button id="publish_submit" class="button_primary">发布</button>
        </div>
    </div>
</div>

<script src="js/jquery.min.js"></script>
<script src="js/blog.js"></script>
</body>

</html>
